<script src="/parkinfo/js/jquery.min.js"></script>
<script src="/parkinfo/script/datepicker.js"></script>
<link href="/parkinfo/css/bootstrap.min.css" rel="stylesheet"/>
<script src="/parkinfo/script/utility.js"></script>
<script src="/parkinfo/script/jquery.cookie.js"></script>
<link href="/parkinfo/datepicker/datepicker.css" rel="stylesheet">
<script src="/parkinfo/script/datepicker.js"></script>
<script src="/parkinfo/script/highcharts.js"></script>
<script src="/parkinfo/script/HighchartTheme.js"></script>
<script type="text/javascript" src="/parkinfo/script/highcharts-more.js"></script>
<script src="/parkinfo/script/bootstrap.min.js"></script>
<script src="/parkinfo/script/highcharts.js"></script>
<script src="/parkinfo/script/businessCarport.js"></script>


<div class="content-wrapper">
	<section class="content-header">
          <h1>
            <small>车位状态</small>
          </h1>
        
    </section>

    <section class="content">
       <div class="row">
            <div class="col-xs-12">
              	<div class="box">
	                <div class="box-header">
	                  <h3 class="box-title"></h3>
	                </div><!-- /.box-header -->
	                <div class="box-body">  
		                
	                	<div class="pull-right">
	                	<select class="form-control" style="padding:1px;font-size:14px;height:35px" id="searchPark">
	                		#foreach( $park in $parks)
                                                <option value=$park.id>$park.name</option>
                            #end							
	                	</select>
	                	</div>
	                	
	                	<br/>   
	                    <br/> 
						<div>
							 <table class="table table-bordered table-hover" id='businessCarportTable' style="font-size:12px;vertical-align: middle;">
					            <tr>
					             <th><span style=""><input type="checkbox" /></div></th>
										<th ><span style="padding-left:15%">Id</div></th>		
										<th><span style="padding-left:15%">停车场名称</div></th>
										<th><span style="padding-left:15%">停车位编号</div></th>
										<th><span style="padding-left:15%">MAC Id</div></th>
										<th><span style="padding-left:15%">状态</div></th>
										<th><span style="padding-left:15%">楼层</div></th>
										<th><span style="padding-left:15%">位置</div></th>
										<th><span style="padding-left:15%">描述</div></th>
										<th><span style="padding-left:15%">日期</div></th>	
					            </tr>
					          <tbody id="businessCarportBody"></tbody>
					          </table>
    					</div>
    				</div>
    				<div class="box-footer clearfix">
      					<div id='pagination'></div>
      				</div>
	            </div>
            </div>
        </div>
    </section>
</div>
    
<div class="modal fade" id="addBusinessCarportModal" tabindex="-1" role="dialog" aria-labelledby='addBusinessCarportLabel' aria-hidden='true'>
	<div class='modal-dialog'>
		<div class='modal-content'>
		
			<div class='modal-header'>
				<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
				<h4 class='modal-title' id='addBusinessCarportLabel'>停车位信息</h4>
			</div>
			
			<div class='modal-body'>
				<form class='form-horizontal' id='addBusinessCarportForm' role='form'>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='parkName'>停车场名称</label>
						<div class='col-sm-8'>
							<select class='form-control' id='parkName'>
							<option>请选择停车场</option>
							</select>
						</div>
						<div id='parkNameLoader'>
						</div>
					</div>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='businessCarportNumber'>停车位编号</label>
						<div class='col-sm-8'>
							<input type='text' class='form-control' id='businessCarportNumber' placeholder='停车位编号'>
						</div>
					</div>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='macId'>硬件地址</label>
						<div class='col-sm-8'>
							<select class='form-control' id='macId'>
							<option>请选择MAC ID</option>
							</select>
						</div>
						<div id='macIdLoader'>
						</div>
					</div>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='businessCarportStatus'>状态</label>
						<div class='col-sm-8'>
							<select class='form-control' id='businessCarportStatus'>
								<option value=0>无车</option>
								<option value=1>有车</option>
							</select>
						</div>
					</div>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='businessCarportFloor'>楼层</label>
						<div class='col-sm-8'>
							<input type='text' class='form-control' id='businessCarportFloor' placeholder='请输入楼层信息'>
						</div>
					</div>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='businessCarportPosition'>位置</label>
						<div class='col-sm-8'>
							<input type='text' class='form-control' id='businessCarportPosition' placeholder='请输入位置信息'>
						</div>
					</div>
					<div class='form-group'>
						<label class='col-sm-2 control-label' for='businessCarportDesc'>描述</label>
						<div class='col-sm-8'>
							<input type='text' class='form-control' id='businessCarportDesc' placeholder='请输入描述信息'>
						</div>
					</div>
					
					<div id='addBusinessCarportResult'>						
					</div>
			</div>
			
			<div class='modal-footer'>
				<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>
				<button id="submitBusinessCarportBtn" type='button' class='btn btn-primary'>提交</button>
			</div>
			
		</div>
	</div>
</div>

<div id='showMessage'>
</div>

<div id='showErrorMessage'>
</div>

<div class="modal fade" id="addCarportNum" tabindex="-1" role="dialog"  aria-hidden='true'>
	<div class='modal-dialog'>
		<div class='modal-content'>
		
			<div class='modal-header'>
				<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
				<h4 class='modal-title' >停车位自动生成</h4>
            </div>
			<div class="modal-body">
				<div class='row'>
						<label class='col-sm-2 control-label' for='parkNameSelect'>停车场</label>
						<div class='col-sm-8'>
							<select class='form-control' id='parkNameSelect'>
							<option>请选择停车场</option>
							</select>
						</div>
						<div id='parkNameLoader1'>
						</div>
					</div>
				<div class="row">
					<div class="col-md-2">
						<label class="control-label" sytle="float:right">开始序号
                        </label>
                    </div>
					<div class="col-md-8">
						<input type="text" id="carportStartNum" class="form-control"/>
                    </div>
                </div>
				<div class="row" style="padding-top:10px">
					<div class="col-md-2">
						<label class="control-label">车位数
                        </label>
                    </div>
					<div class="col-md-8">
						<input type="text" id="carportTotalNum" class="form-control"/>
                    </div>
                </div>
				<div id="insertCarportNumResult">
                </div>
            </div>
		<div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" class="btn btn-primary" id="addCarportSubmit">
				添加车位
            </button>
         </div>
        </div>
    </div>
	 </div>
<div class="modal fade" id="carportUsage" tabindex="-1" role="dialog"  aria-hidden='true'>
	<div class='modal-dialog'>
		<div class='modal-content'>
		
			<div class='modal-header'>
				<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
				<h4 class='modal-title' >停车位</h4>
			</div>
			
			<div class='modal-body'>
				<div>
					<ul id="myTab" class="nav nav-tabs">
   						<li class="active"><a href="#usageChart" data-toggle="tab">图表</a></li>
   						<li><a href="#usageTable" data-toggle="tab">表格</a></li>
   					</ul>
				</div>
				<div class="tab-content">
					<div class="tab-pane fade in active" id="usageChart">
						<div class="form-group">
							<label for="carportStartDate" class="control-label">开始日期</label>
							<input type="text" id="carportStartDate"  class="form-control date">									
						</div>
						<div class="form-group">
							<label for="carportEndDate" class="control-label">结束日期</label>
							<input type="text" id="carportEndDate"  class="form-control date">									
						</div>
						<div id = "carportUsageRateChart">
						</div>
						<div id = "carportUsageChart">
						</div>
					</div>
					<div class="tab-pane fade" id="usageTable">
						<div class="form-group">
							<label for="carportStartDateForTable" class="control-label">开始日期</label>
							<input type="text" id="carportStartDateForTable"  class="form-control date">									
						</div>
						<div class="form-group">
							<label for="carportEndDateForTable" class="control-label">结束日期</label>
							<input type="text" id="carportEndDateForTable"  class="form-control date">									
						</div>
						<table class="table table-bordered table-hover" id='businessCarportTable' style="font-size:12px;vertical-align: middle;">
							<thead>
							<tr>
								<th>ID</th>
								<th>开始时间</th>
								<th>结束时间</th>
								
							</tr>
							</thead>
							<tbody id="carportUsageTbody">
							</tbody>
						</table>
					</div>
				</div>
			</div>
			
			<div class='modal-footer'>
				<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>				
			</div>
			
		</div>
	</div>
</div>

<script>
$(document).ready(function(){
	$.fn.businessCarport.initial();
});

</script>

</script>